import {Button, Card, Col, Form, Row, Select, Space, Table, Tag,Popconfirm} from "antd"
import React, {useEffect, useState} from "react";
import {useAppDispatch} from "@/hooks";
import {
    deleteAttrAsync,
    getAttrInfoListAsync,
    getCategory1ListAsync,
    getCategory2ListAsync,
    getCategory3ListAsync,
    useSelectAttr
} from "@/store/slice/attr";
import {DeleteOutlined, FormOutlined, PlusOutlined} from "@ant-design/icons";
import Edit from "@/pages/goods/attr/edit";

const { Option } = Select;
function Attr(){
    const [form] =Form.useForm()
    const dispatch = useAppDispatch()
    const [flag,setFlag] = useState<boolean>(false)
    const {category1List,category2List,category3List,attrList,category3Id} = useSelectAttr()

    useEffect(()=>{
        dispatch(getCategory1ListAsync())
    },[])

    useEffect(()=>{
        const {category3Id} = form.getFieldsValue()
        if(category3Id){
            setFlag(true)
        }else {
            setFlag(false)
        }
    },[form.getFieldsValue()])

    //一级分类id
    const category1IdChange = (value: number)=>{
        if(!value)return
        form.resetFields(['category2Id','category3Id'])
        dispatch(getCategory2ListAsync(value))
    }
    //二级分类id
    const category2IdChange = (value: number)=>{
        if(!value)return
        form.resetFields(['category3Id'])
        dispatch(getCategory3ListAsync(value))
    }
    //三级分类id
    const category3IdChange = (value: number)=>{
        if(!value)return
        dispatch(getAttrInfoListAsync(value))
    }
    //控制显隐
    const [isShow,setIsShow] = useState<boolean>(true)
    //切换isShow
    const toggleShow = (bol:boolean)=>{
        setIsShow(!bol)
    }
    //添加修改属性值列表
    const [addList,setAddList] = useState<any>({
        attrName: "",
        attrValueList: []
    })
    return(
        <>
            <Card style={{margin:'0 0 30px 0'}}>
                <Form disabled={!isShow} form={form} name="control-hooks">
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="一级分类" name='category1Id'>
                                <Select
                                    placeholder="请选择一级分类"
                                    onChange={category1IdChange}
                                >
                                    {
                                        category1List.map((item:any)=><Option value={item.id} key={item.id}>{item.name}</Option>)
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="二级分类" name='category2Id'>
                                <Select
                                    placeholder="请选择二级分类"
                                    onChange={category2IdChange}
                                >
                                    {
                                        category2List.map((item:any)=><Option value={item.id} key={item.id}>{item.name}</Option>)
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="三级分类" name='category3Id'>
                                <Select
                                    placeholder="请选择三级分类"
                                    onChange={category3IdChange}
                                >
                                    {
                                        category3List.map((item:any)=><Option value={item.id} key={item.id}>{item.name}</Option>)
                                    }
                                </Select>
                            </Form.Item>
                        </Col>

                    </Row>

                </Form>
            </Card>

            {
                isShow? <Card>
                    <Button
                        disabled={!flag}
                        type="primary"
                        icon={<PlusOutlined />}
                        onClick={()=>{
                            toggleShow(true)
                            setAddList({
                                attrName: "",
                                attrValueList: []
                            })
                        }}
                    >添加</Button>
                    <Table
                        rowKey='id'
                        columns={[
                            {
                                title:'序号',
                                width:70,
                                align:'center',
                                dataIndex:'id'
                            },
                            {
                                title:'属性名称',
                                dataIndex:'attrName',
                                align:'center'
                            },
                            {
                                title:'属性值列表',
                                render(value){
                                    return(
                                        <>
                                            {
                                                value.attrValueList.map((item:any)=><Tag color="rgb(245,108,108)" key={item.id}>{item.valueName}</Tag>)
                                            }
                                        </>
                                    )
                                }
                            },
                            {
                                title:'操作',
                                align:"center",
                                render(value){
                                    return(
                                        <>
                                            <Space>
                                                <Button icon={<FormOutlined />} shape="circle" onClick={()=>{
                                                    toggleShow(true)
                                                    setAddList({...value})
                                                }}/>
                                                <Popconfirm
                                                    title="确认删除该属性吗?"
                                                    onConfirm={async ()=>{
                                                        await dispatch(deleteAttrAsync(value.id))
                                                        await dispatch(getAttrInfoListAsync(category3Id))
                                                    }}
                                                    okText="确定"
                                                    cancelText="取消"
                                                >
                                                    <Button
                                                        type="primary"
                                                        icon={<DeleteOutlined />}
                                                        shape="circle"
                                                        danger
                                                    />
                                                </Popconfirm>

                                            </Space>
                                        </>
                                    )
                                }
                            }
                        ]}
                        dataSource={flag? attrList:[]}
                        pagination={false}
                        style={{margin:'20px 0'}}/>
                </Card>:<Edit toggleShow={toggleShow} addList={addList}/>
            }
        </>
    )
}

export default Attr
